<template>
	<view>
		<map v-if="showMap" style="width: 100%; height: 100vh;" :latitude="location.lat" :longitude="location.lng"
			:markers="covers" @markertap="gotoDetail">
		</map>
		<!-- <view class="home-icon-r">
			<view class="home-icon">
				<image src="../../static/img/home-con2.png" mode=""></image>
				<view>工单</view>
			</view>
			<view class="home-icon">
				<image src="../../static/img/home-con1.png" mode=""></image>
				<view>扫码</view>
			</view>
			<view class="home-icon">
				<image src="../../static/img/home-con3.png" mode=""></image>
				<view>刷新</view>
			</view>
		</view> -->
		<uniFab ref='fab' :content="content" @trigger="trigger"></uniFab>
		<!-- #ifdef MP-WEIXIN -->
		<zero-privacy :onNeed="false"></zero-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniFab from '@/components/uni-fab'
	export default {
		data() {
			return {
				showMap: false,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: '',//39.909
				longitude: '',//116.39742
				covers: [],
				content:[{
					iconPath: '/static/img/home-con02.png',
					selectedIconPath: '/static/img/home-con2.png',
					text: '创建工单',
					active: false
				},{
					iconPath: '/static/img/home-con01.png',
					selectedIconPath: '/static/img/home-con1.png',
					text: '扫码',
					active: false
				},{
					iconPath: '/static/img/home-con03.png',
					selectedIconPath: '/static/img/home-con3.png',
					text: '刷新',
					active: false
				}],
				mySocket: null,
				timer: null,
				lockReconnect: false,
				isSocketConnected: false,
				heartBeatTime: 0,
				serverTimeoutObj: null,
				siteTimer:null,//获取站点列表的定时器
			}
		},
		components: {
			uniFab
		},
		computed: {
			...mapState([
				"userInfo","location"
			]),
		},
		onShow() {
			if (this.userInfo.token == undefined) {
			    this.loginOut();
				return
			}else{
				this.getIndexSite();
				if(this.siteTimer == null){
					this.siteTimer = setInterval(()=>{
						this.getIndexSite();
					},5000)
				}
			}
			this.authorization(); //获取 位置授权
		},
		onHide(){
			this.$refs.fab.close();
			if(this.siteTimer != null){
				clearInterval(this.siteTimer)
				this.siteTimer = null
			}
		},
		methods: {
			async authorization() {
				try {
					// #ifdef MP-WEIXIN
					await this.getPosterLocation();
					// #endif
				} catch (error) {
					// console.log(error)
					uni.showModal({
						title: '温馨提示',
						content: '获取权限失败，请将位置信息设置为【使用小程序时和离开小程序后】，才能为您生成巡检轨迹！',
						success: (res) => {
							if (res.confirm) {
								// #ifdef MP-WEIXIN
								this.handleOpenSettng();
								// #endif
							}
						}
					});
					return;
				}
			},
			handleOpenSettng() {
				// console.log("获取用户授权");
				// #ifdef MP-WEIXIN
				wx.openSetting({
					success: (res) => {
						if (res.authSetting["scope.userLocation", "scope.userLocationBackground"]) { // 用户同意授权
							// console.log("用户同意授权");
							this.authorization();
						}
					}
				})
				// #endif
			},
			// #ifdef MP-WEIXIN
			//获取定位
			getPosterLocation() {
				let that = this
				return new Promise((resolve, reject) => {
					// console.log("定位中...");
					// 开启定位追踪
					// #ifdef MP-WEIXIN
					wx.startLocationUpdateBackground({
						success: (res) => {
							// console.log("微信端开启定位追踪", res);
							uni.offLocationChange(this.handleLocationChange) 
							uni.onLocationChange(this.handleLocationChange);
							resolve();
						},
						fail: (err) => {
							// console.log('微信端获取当前位置失败', err);
							reject();
						}
					})
					// #endif
				})
			},
			// #endif
			handleLocationChange(res){
				let info = {
					lat:res.latitude,
					lng:res.longitude
				}
				this.$store.commit('SETUSERlOCATION',info)
			},
			loginOut() {
			    this.$lib.$store.commit('clearUserInfo')
			    uni.reLaunch({
			        url: '/pages/login/index'
			    })
			},
			trigger(e) {
				let that = this
				if(e.index == 0){
					uni.navigateTo({
						url:'/pages/workOrder/createOrder'
					})
				}else if(e.index == 1){
					// 只允许通过相机扫码
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							let code = res.result;
							uni.navigateTo({
								url:'/pages/xunjian/index?code=' + code
							})
						}
					});
				}else if(e.index == 2){
					uni.showLoading()
					this.getIndexSite();
				}
			},
			gotoDetail(e){
				uni.navigateTo({
					url:'/pages/xunjian/index?code=' + this.covers[e.detail.markerId].code
				})
			},
			async getIndexSite() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.indexSite,
					data: {},
					needLogin: true
				})
				if (res.code == 1) {
					let items = res.data;
					this.covers = []
					for (let i = 0, leng = items.length; i < leng; i++) {
						const item = items[i]
						if (item.lnglat != '') {
							let site = {
								id: i,
								// id: Number(item.code),
								code:item.code,
								latitude: item.lnglat.split(',')[1],
								longitude: item.lnglat.split(',')[0],
								iconPath: '../../static/img/location.png',
								width: 20,
								height: 20
							}
							this.covers.push(site)
						}
					}
					this.showMap = true
					uni.hideLoading()
				}else{
					uni.hideLoading()
				}
			},
		}
	}
</script>

<style>
	.uni-fab__content--other-platform {
		box-shadow: none !important;
	}
	.home-icon-r{
		position: fixed;
		z-index: 111111111111111111;
	    right: 6%;
		bottom: 4%;
	}
	.home-icon{
		background: #4d71ff;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-size: 12px;
		width: 55px;
		height: 55px;
		line-height: 12px;
		border-radius: 52px;
		margin-bottom: 12px;
	}
	.home-icon image{
		width: 30px;
		height: 30px;
		margin-top: 2px;
	}
</style>
